<template>
	<view class="ts-flex ts-column ts-flex-item">
		<view class="ts-flex ts-column">
			<ts-search-bar></ts-search-bar>
			<button @tap="showBanner">显示广告</button>
		</view>
		<ts-popup-ad v-model="hiddenBanner" @close="handleClose" :closeButtonImage="closeButtonImage">
			<ts-banner image="http://beidian.zengqs.com/wp-content/uploads/elementor/thumbs/1528702340969-nskg8a25k719mluunqsofubjy6efqeui98a4wb5g3c.jpg" 
      height="250"></ts-banner>
		</ts-popup-ad>
	</view>
</template>

<script>
	import tsBanner from "@/components/teaset/components/ts-banner.vue";
	import tsPopupAd from "@/components/teaset/components/ts-popup-ad.vue";
	import tsSearchBar from "@/components/teaset/components/ts-search-bar.vue";
	export default {
		components: {
			tsBanner,
			tsPopupAd,
			tsSearchBar,
		},
		data() {return {
			hiddenBanner: false,
			//不设置使用默认值
			closeButtonImage: ''
		}},
		methods: {
			handleClose: function(e) {
				//记录广告点击、投放频率等信息
				console.log('close:' + e)
			},
			showBanner() {
				this.hiddenBanner = false;
			}
		},
	}
</script>

<style>
	page view {
		display: flex;
		flex-direction: row;
	}
</style>
